<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Fancytree - Example: Table</title>

    <script src="//code.jquery.com/jquery-1.12.1.min.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

    <style type="text/css">
        /* Set alternating row colors (define BEFORE standard css). */
        /*
          table.fancytree-ext-table tbody tr:nth-child(even){
            background-color: #f4f4f8;
          }
        */
        /* custom alignment (set by 'renderColumns'' event) */
        td.alignRight {
            text-align: right;
        }

    </style>
    <link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
    <script src="../src/jquery.fancytree.js" type="text/javascript"></script>
    <script src="../src/jquery.fancytree.table.js" type="text/javascript"></script>

    <!-- (Irrelevant source removed.) -->

    <script type="text/javascript">
        $(function(){
            // Attach the fancytree widget to an existing <div id="tree"> element
            // and pass the tree options as an argument to the fancytree() function:
            $("#treetable").fancytree({
                extensions: ["table"],
                checkbox: true,
                table: {
                    indentation: 20,      // indent 20px per node level
                    nodeColumnIdx: 2,     // render the node title into the 2nd column
                    checkboxColumnIdx: 0  // render the checkboxes into the 1st column
                },
                source: {
                    url: "ajax-tree-products.json"
                },
                lazyLoad: function(event, data) {
                    data.result = {url: "ajax-sub2.json"}
                },
                renderColumns: function(event, data) {
                    var node = data.node,
                            $tdList = $(node.tr).find(">td");
                    // (index #0 is rendered by fancytree by adding the checkbox)
                    $tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
                    // (index #2 is rendered by fancytree)
                    $tdList.eq(3).text(node.key);
                    $tdList.eq(4).html("<input type='checkbox' name='like' value='" + node.key + "'>");
                }
            });
            /* Handle custom checkbox clicks */
            $("#treetable").delegate("input[name=like]", "click", function(e){
                var node = $.ui.fancytree.getNode(e),
                        $input = $(e.target);
                e.stopPropagation();  // prevent fancytree activate for this row
                if($input.is(":checked")){
                    alert("like " + $input.val());
                }else{
                    alert("dislike " + $input.val());
                }
            });
        });
    </script>
</head>

<body class="example">
<h1>Example: 'table' extension</h1>
<div class="description">
    <p>
        Render tree as a table (aka tree grid) and support keyboard navigation
        in a grid with embedded input controls.
    </p>
    <p>
        <b>Status:</b> beta.
        <b>Details:</b>
        <a href="https://github.com/mar10/fancytree/wiki/ExtTable"
           target="_blank" class="external">ext-table</a>.
    </p>
</div>

<div>
    <label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>

<table id="treetable">
    <colgroup>
        <col width="30px"></col>
        <col width="30px"></col>
        <col width="*"></col>
        <col width="50px"></col>
        <col width="30px"></col>
    </colgroup>
    <thead>
    <tr> <th></th> <th>#</th> <th></th> <th>Key</th> <th>Like</th> </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>